import { Button, Modal } from 'ant-design-vue'
import { defineComponent, renderSlot, ref } from 'vue'
import SpsIcon, { iconList } from './Icon'
import { throttle } from '../../utils'
import { ICON_SHOW_NUMBER } from '../../utils/constant'

export default defineComponent({
  name: 'SpsIconSelect',
  props: {
    title: {
      type: String,
      default: '请选择图标'
    },
    value: {
      type: String
    }
  },
  emits: ['update:value'],
  setup(props, { slots, emit }) {
    // 模态框显隐
    const visible = ref(false)
    const handleButtonClick = () => {
      visible.value = true
    }
    // 搜索框
    const searchStrTmp = ref('')
    const searchStr = ref('')
    const scrollListNumber = ref(ICON_SHOW_NUMBER)
    const handleSearch = () => {
      // 重置显示图标数
      scrollListNumber.value = ICON_SHOW_NUMBER
      searchStr.value = searchStrTmp.value
    }
    // 模态框内容滚动
    const handleListScroll = throttle((e: Event) => {
      const { clientHeight, scrollTop } = e.target as HTMLElement
      let listNumber =
        Math.round(((clientHeight + scrollTop) / 64) * 4) + ICON_SHOW_NUMBER
      listNumber = Math.min(
        Math.max(scrollListNumber.value, listNumber),
        iconList.length
      )
      scrollListNumber.value = listNumber
    }, 200)
    // 处理选中事件
    const handleSelect = (icon: string) => {
      emit('update:value', icon)
      visible.value = false
    }
    /* render 函数 */
    return () => {
      // 图标列表
      const icons = iconList
        .filter((iconName) => {
          const reg = new RegExp(searchStr.value, 'i')
          return reg.test(iconName)
        })
        .slice(0, scrollListNumber.value)
        .map((iconName) => (
          <div class="icon-box">
            <SpsIcon
              name={iconName}
              size={10}
              {...{
                onClick() {
                  handleSelect(iconName)
                }
              }}
            />
            <div class="icon-Name">{iconName}</div>
          </div>
        ))
      // 模态框内容
      const modalContent = () => {
        return (
          <>
            <a-input-search
              placeholder="查找图标"
              v-model:value={searchStrTmp.value}
              enter-button
              onSearch={handleSearch}
            />
            <div class="modal-content" onScroll={(e) => handleListScroll(e)}>
              {icons}
            </div>
          </>
        )
      }
      // 模态框页脚
      const modalFooter = () => {
        return (
          <a-button key="back" onClick={() => (visible.value = false)}>
            取消
          </a-button>
        )
      }
      return (
        <div class="sps-icon-select">
          <span class="selected-icon">
            {props.value ? (
              <SpsIcon name={props.value} size={8} />
            ) : (
              '未选择图标'
            )}
          </span>
          <Button type="primary" shape="round" onClick={handleButtonClick}>
            {slots.default ? renderSlot(slots, 'default') : '选择图标'}
          </Button>
          <Modal
            class="sps-icon-select-modal"
            title={props.title}
            v-model:visible={visible.value}
            width={900}
            v-slots={{ default: modalContent, footer: modalFooter }}></Modal>
        </div>
      )
    }
  }
})
